<template>
    <div id="zoomIn">
        <div class="img-container flex-center " ref="imgContainer">
            <img v-for="(item, index) in images" :key="index" :src="item" v-show="index===currentImg" alt="加载失败" :ref="`img${index}`">
        </div>
        <div class="img-pages flex-between">
            <div class="page-rect-handle">
                <el-slider v-model="value" :marks="marks" :show-tooltip="false" :max="max" @input="changeImgSize"></el-slider>
                <!-- <div :class="[currentImg===index ? 'current-page' : 'other-pages','pointer']" v-for="(item, index) in images" :key="index" @click="changeImgToThisIndex(index)"></div> -->
            </div>
            <div class="watchType_warpper">
                <div class="typeBtn" :class=" watchType == 0 ? 'activeType':'' " @click=" watchType = 0 , value = 0 ">镜头模式</div>
                <div class="typeBtn" :class=" watchType == 1 ? 'activeType':'' " @click=" watchType = 1 , value = 0 ">全屏模式</div>
            </div>
        </div>
        <div class="zoom-desc">
            <div class="" :class="watchType == 1 ? 'reduce':'' ">
                <img  v-if="watchType == 1" src="../../assets/img/zoomIn/reduce2.png" alt="" @touchstart="zoomOut" @mousedown="zoomOut">
                <img  class="lens" v-else src="../../assets/img/zoomIn/reduce1.png" alt="" @touchstart="zoomOut" @mousedown="zoomOut">
            </div>
            <div  class="addNum">当前放大倍数：{{mpower}}X</div>
            <div class="" :class="watchType == 1 ? 'add':'' ">
                <img v-if="watchType == 1" src="../../assets/img/zoomIn/add2.png" alt=""  @touchstart="zoomIn" @mousedown="zoomIn">
                <img class="lens" v-else  src="../../assets/img/zoomIn/add1.png" alt="" @touchstart="zoomIn" @mousedown="zoomIn">
            </div>
        </div>
        <div class="mask" v-if="watchType == 0">
            <img src="../../assets/img/zoomIn/mask.png" alt="">
        </div>
    </div>
</template>
<script>
import mixin from '../../mixin/mixin'

let style = {
    color: '#303133',
    marginTop: '8px',
    fontSize: '12px'
}
export default {
    mixins: [mixin],
    data() {
        return {
            images: [],
            currentImg: 0,
            value: 0,
            marks: {

            },
            max: 100,
            step: 0,
            tiemInterval: null,
            date: null,
            click: 0,
            watchType:1, //0、镜头模式 1、全屏模式
        }
    },
    name: "ZoomIn",
    computed: {
        mpower() {
            let power = this.value === 0 ? 0 : Math.ceil(this.value / this.step) - 1
            let pow = Math.pow(2, power)
            let val = ((this.value - this.step * this.currentImg) / this.step * pow)
            return (pow + val).toFixed(1)
        }
    },
    created(){
    },
    mounted() {
        let imgArry = this.bsr.images.split('|')
        imgArry.forEach(v => {
            let suffix = this.getFileSuffix(v)
            this.images.push(window.$DATADIR + `resc/ZoomIn/${this.bsr.id}/${v.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, suffix)}`)
        })
        this.step = Math.floor(100 / this.images.length)
        this.max = this.step * this.images.length
        this.bsr.levels.forEach((v, i) => {
            this.$set(this.marks, i * this.step, {})
            this.marks[i * this.step].label = v.num
            this.marks[i * this.step].style = style
        })
        this.$nextTick(() => {
            let interVal = setInterval(() => {
                try {
                    let width = this.$refs.img0[0].getBoundingClientRect().width
                    if (width !== 0) {
                        console.log(width)
                        this.$refs.imgContainer.style.width = width + 'px'
                        clearInterval(interVal)
                    }
                } catch (err) {
                    console.log(err)
                    clearInterval(interVal)
                }
            })
        })
        
    },
    methods: {
        changeImgSize(val) {
            if (val === 0) {
                this.currentImg = 0
                this.$refs.img0[0].style.transform = 'scale(1)'
                return
            }
            this.currentImg = Math.ceil(val / this.step) - 1
            // if (Math.ceil(val / this.step) - 1 !== this.currentImg) {
            //     this.$refs.img[`img${this.currentImg-1}`][0].style.transform = 'scale(1)'
            //     console.log(111)
            // }
            this.$refs[`img${this.currentImg}`][0].style.transform = `scale(${(val - this.currentImg * this.step) / 10 / (this.step / 10) + 1})`
        },
        changeImgToThisIndex(index) {
            this.currentImg = index
            console.log(index)
        },
        releaseZoom() {
            if (new Date() - this.date < 100) {
                
                let mod = this.value%this.step
                if (mod !== 0) {
                    console.log('非整步骤');
                    if (this.click > 0) {
                        this.value =  this.value - mod + this.click
                    }else{
                        this.value =  this.value - mod 
                    }
                }else{
                    this.value += this.click
                }
            }
            clearInterval(this.tiemInterval)
            document.documentElement.removeEventListener('mouseup', this.releaseZoom)
            document.documentElement.removeEventListener('touchend', this.releaseZoom)
        },
        //TODO:修改点击放大的跨度
        zoomIn() {
            
            this.click = this.step
            this.date = new Date()
            if (this.value >= this.max) {
                this.value = this.max
                return
            }
            let step = this.step
            this.tiemInterval = setInterval(() => {
                if (this.value%this.step !== 0) {
                    let mod = this.value%this.step
                    this.value = this.value - mod + step
                }else{
                    this.value += step
                }
            }, 100);
            console.log(this.step,this.max,this.value);
            document.documentElement.addEventListener('mouseup', this.releaseZoom)
            document.documentElement.addEventListener('touchend', this.releaseZoom)
        },
        zoomOut() {
            this.click = -this.step
            this.date = new Date()
            if (this.value <= 0) {
                this.value = 0
                return
            }
            let step = this.step
            this.tiemInterval = setInterval(() => {
                if (this.value%this.step !== 0) {
                    let mod = this.value%this.step
                    this.value = this.value - mod 
                }else{
                    this.value -= step
                }
            }, 100);
            document.documentElement.addEventListener('mouseup', this.releaseZoom)
            document.documentElement.addEventListener('touchend', this.releaseZoom)
        }
    },
}
</script>

<style lang="scss">
#zoomIn {
    position: relative;
    .zoom-desc {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 100%;
        height: 4.2vw;
        font-size: 32px;
        bottom: 115px;
        left: 0;
        z-index: 9999!important;
        img{
            cursor: pointer;
            width: 100%;
            height: 100%;
        }
        .reduce,.add{
            width: 4.2vw;
            height: 4.2vw;
        }
        .addNum{
            width: 20.4vw;
            height: 4.2vw;
            line-height:4.2vw;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 57px;
            text-align: center;
            color: #fff;
            font-weight: 500;
            margin:0 1.67vw;
        }
        .lens{
            width: 4.2vw;
            height: 4.2vw;
        }
    }
    .mask{
        width: 100%;
        height: calc(100vh - 108px);
        position:absolute;
        top: 0;
        left: 0;
        z-index: 9;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .watchType_warpper{
        margin-left: 100px;
        display: flex;
        align-items: center;
        border-radius: 4px;
        font-size: 16px;
        border: 2px solid #FFFFFF;
        .typeBtn{
            width: 95px;
            height: 39px;
            line-height: 39px;
            text-align: center;
            background: #FFFFFF;
            color: #616161;
            border-radius: 2px;
            cursor: pointer;
            // border: 2px solid #FFFFFF;
        }
        .activeType{
            color: #FFFFFF;
            background: #2E83DB;
        }
    }
    .img-container {
        // width: 100vw;
        height: calc(100vh - 108px);
        vertical-align: bottom;
        overflow: hidden;
        margin: 0 auto;
        img{
            // width: auto;
            height: 100%;
        }
    }
    .img-pages {
        max-width: 100vw;
        box-sizing: border-box;
        height: 78px;
        background: #dcdfe7;
        padding: 0 7.5vw;
        .page-rect-handle {
            position: relative;
            flex: 1;
            .el-slider{
                transform: translateY(-12px);
            }
            .el-slider__runway {
                background-color: #bfc6d9;
            }
            .el-slider__button-wrapper{
                width: 52px;
                height: 30px;
                // background-image: url(../../assets/img/zoomIn/slider.png);
                // background-size: cover;
                // background-repeat: no-repeat;
                // background-color: none;
                // background-position: 80% 100%;
                // opacity: 0;
            }
            .el-slider__stop {
                height: 20px;
                width: 20px;
                background-color: #bfc6d9;
                transform: translate(-50%, -5px);
            }
            .el-slider__button {
                background-color: transparent!important;
                border-radius: 0;
                border: none;
                width: 52px;
                height: 30px;
                position: relative;
                top: 5px;
                background-image: url(../../assets/img/zoomIn/slider.png);
                background-size: cover;
                background-repeat: no-repeat;
                &.hover {
                    transform: scale(1);
                }
            }
            .el-slider__bar {
                background-color: transparent;
            }
            .el-slider__marks-text{
                margin-top: 20px!important;
                font-size: 14px!important;
            }
        }
        .current-page {
            width: 20px;
            height: 20px;
            background: #4894ff;
            box-shadow: 0px 8px 13px 0px rgba(72, 148, 255, 0.16);
            border-radius: 50%;
        }
        .other-pages {
            width: 20px;
            height: 20px;
            background: rgba(191, 198, 217, 1);
            border-radius: 50%;
        }
        // .change {
        //     width: 32px;
        //     height: 32px;
        //     background: rgba(220, 223, 231, 1);
        //     border: 1px solid rgba(72, 148, 255, 1);
        //     img {
        //         width: 16px;
        //         height: 16px;
        //     }
        // }
        // .page-change-arrows {
        //     width: 64px;
        //     &:nth-child(1) {
        //         margin-right: 27px;
        //     }
        //     &:nth-child(3) {
        //         margin-left: 27px;
        //     }
        // }

        // .page-left {
        //     border-radius: 8px 0px 0px 8px;
        // }
        // .page-right {
        //     border-radius: 0px 8px 8px 0px;
        //     border-left: 1px solid rgba(72, 148, 255, 1);
        // }
    }
}
</style>
